<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
            <meta content="initial-scale=1, maximum-scale=1,user-scalable=no" name="viewport"/>
            <title>
                Picture marker
            </title>
            <link href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" rel="stylesheet"/>
            <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
                <style>
                    html, body, #map {
          height: 100%;
        }
        #title {
          position: absolute;
          z-index: 999;
          top: 15px;
          right: 25px;
          color: #333;
        }

        /* Custom icon style */
        .leaflet-echart-icon {
          transition: all 1s;
        }

        .leaflet-container {
          background: rgba(0,0,0,0);
        }
                </style>
            </link>
        </meta>
    </head>
    <body>
        <div id="title">
            <p>
                Marker echart
            </p>
        </div>
        <div id="map">
        </div>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js">
        </script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js">
        </script>
        <script src="echarts.min.js">
        </script>
        <script >
          $(function() {
      // Leaflet Map Init
      function initMap() {
          var selectedPicture;
          var originalZIndex;
          var map = L.map('map', {
              zoomControl: false
          }).setView([30.75, 120.65], 11);
          L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
              maxZoom: 18,
              attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
              id: 'osm'
          }).addTo(map);
          $.getJSON('data.json', function(data) {
              $.each(data.data, function(i, val) {
                  var marker = L.marker(val.location).addTo(map);
                  var content = '<div style="width: 220px; height: 220px;" id="marker' + val.id + '"></div>';
                  marker.bindPopup(content, {});
                  marker.on('popupopen', function(e) {
                      // 基于准备好的dom，初始化echarts实例
                      var myChart = echarts.init(document.getElementById('marker' + val.id));
                      // 指定图表的配置项和数据
                      option = {
                          tooltip: {
                              trigger: 'axis'
                          },
                          xAxis: [{
                              type: 'category',
                              data: ['1月', '2月', '3月', '4月']
                          }],
                          yAxis: [{
                              type: 'value',
                              name: '水量',
                              min: 0,
                              max: 50,
                              interval: 50,
                              axisLabel: {
                                  formatter: '{value} ml'
                              }
                          }, {
                              type: 'value',
                              name: '温度',
                              min: 0,
                              max: 10,
                              interval: 5,
                              axisLabel: {
                                  formatter: '{value} °C'
                              }
                          }],
                          series: [{
                              name: '蒸发量',
                              type: 'bar',
                              data: [2.0, 4.9, 7.0, 23.2]
                          }, {
                              name: '降水量',
                              type: 'bar',
                              data: [2.6, 5.9, 9.0, 26.4]
                          }, {
                              name: '平均温度',
                              type: 'line',
                              yAxisIndex: 1,
                              data: [2.0, 2.2, 3.3, 4.5]
                          }]
                      };
                      // 使用刚指定的配置项和数据显示图表。
                      myChart.setOption(option);
                  });
              });
          });
      }
      initMap();
  });
        </script>
    </body>
</html>
